<template>
  <div class="w-tooltip">
    <el-tooltip
      v-bind="$attrs"
      :effect="$attrs.effect || 'dark'"
      :placement="$attrs.placement || 'top-start'"
      :disabled="disabled"
    >
      <slot></slot>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'WTooltip',
  data() {
    return {
      disabled: false
    }
  },
  mounted() {
    this.onCalculate()
  },
  methods: {
    onCalculate() {
      const el = this.$slots?.default?.[0]?.elm
      const elW = el.getBoundingClientRect().width
      const parentW = el.parentNode.getBoundingClientRect().width
      if (elW <= parentW) {
        this.disabled = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
.w-tooltip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
